<template>
	<view class="container">
		<navbar title="订单详情" color='#fff' :background='background' :bgSize='bgSize'></navbar>
		<view class="linear-bg">
			<image :src='hostUrl+"/static/images/sure-order-bg.png"'></image>
		</view>
		<view v-if='loadingPage'>
			<load-page></load-page>
		</view>
		<view class="wrap" v-else>
			<address-con :addressObj='orderDetail.address'></address-con>
			<view class="order-goods-wrap">
				<order-goods-list :list='orderDetail.orderGoods' :pageType='1' :orderDetail='orderDetail'></order-goods-list>
			</view>
			<orderInfo :pageType='1' :orderDetail="orderDetail"></orderInfo>
			<view class="concat-wrap line-center" @tap='concat'>
				<image src='../static/kefu.png'></image>
				联系客服
			</view>
		</view>
		<view class="footer-wrap" v-if='orderDetail.order_status == 10'>
			<view class="footer">
				<button class="btn cancel-btn line-center" @tap.stop='cancelOrderModal()' v-if='orderDetail.delivery_status == 10'>取消订单</button>
				<template>
					<button class="btn again-btn line-center" @tap.stop='watchWuliu()' v-if='orderDetail.receipt_status == 10'>查看物流</button>
					<button class="btn cancel-btn line-center" @tap.stop='sureOrderModal()' v-if='orderDetail.receipt_status == 10'>确认收货</button>
				</template>
			</view>
		</view>
		<view class="footer-wrap" v-if='orderDetail.order_status == 30'>
			<view class="footer">
				<button class="btn cancel-btn line-center" @tap.stop='againOrder()'>再来一单</button>
				<button class="btn again-btn line-center" @tap.stop='evaluateOrder()' v-if='orderDetail.is_comment == 0'>去评价</button>
			</view>
		</view>
		<logistics-info ref='logistics'></logistics-info>
	</view>
</template>

<script>
	const app = getApp();
	import addressCon from '@/components/order/address.vue';
	import orderGoodsList from '@/components/order/order-goods-list.vue';
	import orderInfo from '@/components/order/order-info.vue';
	import orderItem from '../components/order-item.vue'
	import logisticsInfo from '../components/logistics-info.vue';
	export default {
		components: {
			addressCon,
			orderGoodsList,
			orderInfo,
			orderItem,
			logisticsInfo
		},
		data() {
			return {
				background: `url(${app.globalData.hostUrl}/static/images/sure-order-bg.png)`,
				bgSize: '100% 400rpx',
				hostUrl: app.globalData.hostUrl,
				loadingPage: true,
				orderId: '',
				orderDetail: {},
				supplyOrderList: [],
				orderType: '',
				customer: {}
			};
		},
		onLoad(option) {
			this.orderId = option.id ? option.id : '';
			this.orderType = option.type ? option.type : '';
			this.getOrderDetail();
			this.getCustomer()
		},
		onPullDownRefresh() {
			this.orderDetail = {};
			this.loadingPage = true;
			this.getOrderDetail();
			uni.stopPullDownRefresh();
		},
		methods: {
			previewImage() {
				uni.previewImage({
					urls: [this.customer.qrcode],
				})
			},
			getOrderDetail() {
				const that = this;
				app.globalRequest({
					api: app.getApi().order.orderDetail,
					data: {
						order_id: that.orderId
					}
				}).then(res => {
					that.loadingPage = false;
					if (res.code == 0) {
						res.data.address.phone = that.$formateTel(res.data.address.phone);
						that.orderDetail = res.data;
					}
				})
			},
			cancelOrderModal() {
				const that = this;
				uni.showModal({
					title: '提示',
					content: `确认要取消此订单吗？`,
					cancelText: '我再想想',
					confirmColor: '#FF5040',
					success(res) {
						if (res.confirm) {
							that.cancelOrder();
						}
					}
				})
			},
			cancelOrder() {
				const that = this;
				const platform = app.getPlatform();
				app.globalRequest({
					api: app.getApi().order.orderCancel,
					data: {
						order_id: that.orderId
					}
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						that.getOrderDetail()
						const pages = getCurrentPages(); // 当前页面
						const beforePage = pages[pages.length - 2]; // 前一个页面
						console.log("beforePage", beforePage);
						beforePage.$vm.page = 1;
						beforePage.$vm.totalPage = '';
						beforePage.$vm.list = [];
						beforePage.$vm.tabType = 'all';
						beforePage.$vm.getList();
						uni.navigateBack({
							delta:1
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			sureOrderModal(){
				const that = this;
				uni.showModal({
					title:'提示',
					content:`确认收到货了吗？`,
					cancelText:'我再想想',
					confirmColor:'#FF5040',
					success(res){
						if(res.confirm){
							that.sureOrder();
						}
					}
				})
			},
			sureOrder(){
				const that = this;
				let list = that.list;
				app.globalRequest({
					api:app.getApi().order.receipt,
					data:{
						order_id:that.orderId
					}
				}).then(res=>{
					if(res.code == 0){
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
						that.getOrderDetail()
						const pages = getCurrentPages(); // 当前页面
						const beforePage = pages[pages.length - 2]; // 前一个页面
						console.log("beforePage", beforePage);
						beforePage.$vm.page = 1;
						beforePage.$vm.totalPage = '';
						beforePage.$vm.list = [];
						beforePage.$vm.tabType = 'all';
						beforePage.$vm.getList();
						uni.navigateBack({
							delta:1
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				})
			},
			againOrder(index){
				const that = this;
				app.globalRequest({
					api:app.getApi().order.againOrder,
					data:{
						order_id:this.orderId
					}
				}).then(res=>{
					if(res.code == 0){
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
						uni.switchTab({
							url:'/pages/tab-page/cart/cart'
						})
					}
				})
			},
			evaluateOrder(){
				uni.navigateTo({
					url:`/pages/after-sale-page/post-comment/post-comment?order_id=${this.orderId}&type=2`
				})
			},
			concat() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '去联系客服',
					confirmColor: '#5DC751',
					success(res) {
						console.log('res', res)
						if (res.confirm) {
							that.getCustomer()
						}
					}
				})
			},
			getCustomer() {
				app.globalRequest({
					api: app.getApi().user.customer,
				}).then(res => {
					if (res.code == 0) {
						this.customer = res.data;
						/* uni.navigateTo({
							url:'/pages/user-page/concat/concat'
						}) */
						wx.openCustomerServiceChat({
							extInfo: {
								url: res.data.link_url
							},
							corpId: 'wwa5777f4dca0241d0', // 替换为你的企业ID
							success(res) {
								console.log('成功打开客服聊天界面');
							},
							fail(err) {
								console.log('打开客服聊天界面失败', err);
							}
						});
					}
				})
			},
			watchWuliu(){
				this.$refs.logistics.showModal = true;
				this.$refs.logistics.orderId = this.orderId;
				this.$refs.logistics.expressCompany = this.orderDetail.express_company;
				this.$refs.logistics.getAuctionPage()
			},
			toPackageDetail(id) {
				uni.navigateTo({
					url: `/pages/user-page/package-detail/package-detail?id=${id}`
				})
			},
			sum(arr) {
				var s = 0;
				for (var i = arr.length - 1; i >= 0; i--) {
					s += parseFloat(arr[i].orderGoods.total_price);
				}
				return s.toFixed(2);
			}
		}
	}
</script>

<style lang="scss" scoped>
	$supplier-color: #44C082;
	
	.linear-bg {
		width: 100%;
		height: 400rpx;
		position: absolute;
		left: 0;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.wrap {
		position: relative;
		z-index: 2;
		padding-bottom: 200rpx;
	}

	.order-goods-wrap {
		padding: 24rpx;
		background: #fff;
		border-radius: 16rpx;
		margin: 24rpx;
	}

	.order-item-con {
		margin: 0 24rpx;
	}

	.address-bg {
		width: 712rpx;
		height: 8rpx;
		position: absolute;
		left: -5rpx;
		bottom: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.no-address-wrap {
		margin: 24rpx 24rpx 0;
		flex-direction: column;
		background: #fff;
		height: 200rpx;
		border-radius: 16rpx 16rpx 0 0;
		position: relative;
	}

	.concat-wrap {
		margin: 24rpx 24rpx 0;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 12rpx;

		image {
			width: 47rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}
	}

	.footer-wrap {
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 1rpx 0rpx 2rpx rgba(0, 0, 0, 0.05);
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 22;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;

		.footer {
			width: 100%;
			height: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.btn {
				width: 220rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 44rpx;
				font-size: 32rpx;
				box-sizing: border-box;
				margin-right: 0;
				margin-left: 24rpx;
			}

			.cancel-btn {
				border: 1px solid $supplier-color;
				color: $supplier-color;
			}

			.again-btn {
				border: 1px solid #AFB0B2;
			}

			.pay-btn {
				border: 1px solid #AFB0B2;
				color: #333333;
			}
		}
	}
</style>